<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桑上有云栈</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    	 .wrap {
            position: relative;
            height: 100%;
            width: 100%;
            background-image: url(https://bing.mcloc.cn/api/);
            background-size: cover;
            background-position: center;
        }
      /*  评论*/
         .comment {
            margin-top: 50px;
            margin-bottom: 100px;
        }
        .hans-container{
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 120px;
            
        }
        .fff{
        	background-color: #FFFFFF;
        	opacity:0.7;
        
        }
    </style>
</head>

<body class="wrap">
	
    <div class="content" id="main">
        <div class="panel panel-default">
            <div class="panel-heading">
            	<h3>音乐小栈</h3>
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入" v-model="keywords"
                            @keyup.enter="musicQuery">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" @click="musicQuery">搜索</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="main">
                    <!-- 左侧音乐列表区域 -->
                    <div class="left">
                        <ul>
                            <li v-for="(item,index) in songs" @click="playMusic(index)">{{item.name}}</li>
                        </ul>
                    </div>
                    <!-- 中间封面区域 -->
                    <div class="center">
                        <img :src="imgUrl" alt="" :style="'transform: rotate(' + degs + 'deg)'">
                    </div>
                    <!-- 右侧评论区域 -->
                    <div class="right">
                        
                        <ul>
                            <h4>热门评论</h4>
                            <li v-for="(item,index) in comments" v-if="item.uname">
                                <img :src="item.uimg" alt="" >
                                <h5>{{item.uname}}</h5>
                                <p>{{item.ubody}}</p>
                            </li>
                            <li>
                                <p v-if="!comments[0].uname">暂无评论</p>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 底部播放器区域 -->
            <div class="foot">
                <audio :src="musicUrl" controls="controls" autoplay="autoplay" @pause="noPlay" @play="musicPlay"></audio>
            </div>
        </div>

    </div>
   <div id="hans-bolang"></div>
   <div class="fff">
		<div class="container-fluid" id="comments">
        <div class="row comment">
            <div class="col-xs-10 col-sm-10 col-md-6 col-xs-push-1 col-sm-push-1 col-md-push-3">
                <h2>留言：</h2>
                <div id="vcomments"></div>
            </div>
        </div>
    </div>
   </div>
</body>
 <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='js/Valine.min.js'></script><!-- Valine 评论系统 -->
 <!-- Valine 评论系统； 由 LeanCloud 管理数据 -->
    <script>
        new Valine({
            el: '#vcomments',
            appId: 'jn9XTGsXq08uKM2vff8BMstw-gzGzoHsz',
            appKey: '3NQPWkiQpsK2wgVUEeGow2rz'
        })
    </script>
    <script src="php/wave.php"></script>
<script src="https://api.vvhan.com/api/bolang"></script>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/js.js"></script>

</html>